<template>
  <div>
    <!-- 更换图片 -->
    <div transfer-dom>
      <x-dialog v-model="showUploadImage" class="dialog-demo">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">图片上传</p>
        </div>
        <ul class="weui-uploader__files" id="uploaderFiles">
          <li class="weui-uploader__file" :style="{backgroundImage:'url('+images+')'}"></li>
        </ul>
        <div class="weui-uploader__input-box">
          <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*"  @change="onFileChange">
        </div>
        <div style="clear:both"></div>
        <div class="weui-dialog__ft">
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" @click="cancelImge">取消</a> 
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script type="application/ecmascript">
import * as types from '@/vuex/types'
import {XDialog, Swiper,SwiperItem,TransferDomDirective as TransferDom} from 'vux'
import { mapState} from 'vuex'
import lrz from '../../node_modules/lrz/dist/lrz.all.bundle'
import axios from '@/axios/http'
export default {
    components: {
     XDialog, 
     Swiper,
     SwiperItem
    },
    props:['showUploadImage','images','indexImage','mark'],
    name: 'UploadImage',

    computed: {
      ...mapState({
        isEditing:state => state.moduleEdit.isEditing,
        tokens:state => state.moduleEdit.qntoken,
        data:state => state.moduleEdit.data,
      }),
    },
    data(){
      return{
        stateImg:{
          image:'',
          index:''
        },
      }
    },
    methods:{
      //取消上传
      cancelImge(){
        this.$emit('delImage')
      },
      //选择图片后
      onFileChange (e) {
        const tonkens = this.tokens
        const _this = this
        lrz(e.target.files[0])
          .then((rst)=> {
              // 处理成功会执行
              let param = new FormData(); //创建form对象
              param.append('file',rst.file,e.target.files[0].name);//通过append向form对象添加数据
              param.append('chunk','0');//添加form表单中其他数据
              param.append('token',tonkens);
              let config = {
                headers:{'Content-Type':'multipart/form-data'}
              };
              //indexImage 图片序号，mark 图片标识
              _this.uploading(param,config,_this.indexImage,_this.mark);//然后将参数上传七牛
          })
          .catch(function (err) {
              // 处理失败会执行
          })
          .always(function () {
              // 不管是成功失败，都会执行
          });
      },
      uploading(param,config,index,mark){
        const _this = this
        axios.post('http://upload.qiniu.com/',param,config)
         .then(response=>{
            let url = 'http://oq2nk7o59.bkt.clouddn.com/'+response.data.key
            _this.stateImg.image = url
            _this.$store.commit(types.UPLOADSINGLEIMG,{url,index,mark})
            _this.cancelImge()
         })
      },
    }
}
</script>
<style lang="less" scoped>
.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    padding-top:30px;
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
.weui-uploader__hd{
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  padding-bottom:10px;
  -webkit-box-align:center;
  -webkit-align-items:center;
          align-items:center;
}
.weui-uploader__title{
  -webkit-box-flex:1;
  -webkit-flex:1;
          flex:1;
}
.weui-uploader__files{
  list-style:none;
  padding-left:9px;
}
.weui-uploader__file{
  float:left;
  margin-right:9px;
  margin-bottom:9px;
  width:79px;
  height:79px;
  background:no-repeat center center;
  background-size:cover;
}
.weui-uploader__file_status{
  position:relative;
}
.weui-uploader__file_status:before{
  content:" ";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:rgba(0, 0, 0, 0.5);
}
.weui-uploader__file_status .weui-uploader__file-content{
  display:block;
}
.weui-uploader__file-content{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
          transform:translate(-50%, -50%);
  color:#FFFFFF;
}
.weui-uploader__file-content .weui-icon-warn{
  display:inline-block;
}

.weui-uploader__input-box{
  float:left;
  position:relative;
  margin-right:9px;
  margin-bottom:9px;
  width:77px;
  height:77px;
  border:1px solid #D9D9D9;
}
.weui-uploader__input-box:before,
.weui-uploader__input-box:after{
  content:" ";
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%, -50%);
          transform:translate(-50%, -50%);
  background-color:#D9D9D9;
}
.weui-uploader__input-box:before{
  width:2px;
  height:39.5px;
}
.weui-uploader__input-box:after{
  width:39.5px;
  height:2px;
}
.weui-uploader__input-box:active{
  border-color:#999999;
}
.weui-uploader__input-box:active:before,
.weui-uploader__input-box:active:after{
  background-color:#999999;
}
.weui-uploader__input{
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
</style>